---
title: "Setting Up Figma OAuth App"
description: "Complete guide to creating and configuring a Figma OAuth application"
---

## Prerequisites

- Figma account (personal or business)
- Access to Figma Developer Portal

## Step 1: Create Figma Developer Account

1. Visit [https://www.figma.com/developers/](https://www.figma.com/developers/)
2. Click **"Sign Up"** or **"Login"** if you already have an account
3. Sign in with your Figma account or create a new developer account

<img src="/images/knowledge-base/figma_oauth_app/figma_step1_login.png" alt="Figma Developer Login" />

## Step 2: Create a New App

1. Once logged in, go to your developer dashboard -> **"My Apps"**
2. Click **"Create a new app"**
3. Fill in the app details:
   - **App name**: Your application name (e.g., your brand name)
   - **Website**: Your company website
   - **App logo**: Upload 100x100px PNG (recommended)

<img src="/images/knowledge-base/figma_oauth_app/figma_step2_create_app.png" alt="Figma App Creation Form" />

## Step 3: Get Your Credentials

<Note>
Klavis Figma MCP Server uses the following OAuth scopes: `files:read,file_comments:write,openid,email,profile`
</Note>

After creating the app, navigate to **OAuth 2.0** tab
- **Client ID**: Copy this value
- **Client Secret**: Generate and copy this value (keep it secure!)
- **Redirect URIs**: Add your callback URL:
   - `https://api.klavis.ai/oauth/figma/callback`

<img src="/images/knowledge-base/figma_oauth_app/figma_step3_client_id_secret_and_redirect_url.png" alt="OAuth Settings and Getting the Credentials" />

<Check>
You have successfully created a Figma OAuth application! You now have your Client ID and Client Secret ready for integration with Klavis AI.
</Check>

## (Optional) Step 4: White Labeling 

<Note>
White labeling allows you to customize the OAuth experience with your own branding instead of Klavis AI's.
</Note>

If you want to use your own Figma OAuth application with custom branding:

1. **Configure White Labeling**: Go to [https://www.klavis.ai/home/white-label](https://www.klavis.ai/home/white-label)
2. **Add Your Credentials**: Enter your Figma **Client ID** and **Client Secret** from Step 3
3. **Set Redirect URI**: Use `https://api.klavis.ai/oauth/figma/callback` or your custom callback URL
4. **Initiate OAuth**: Use your client ID when starting the OAuth flow:

   <CodeGroup>
   
   ```javascript without SDK
   // Example: Initiating Figma OAuth with white-label
   const authUrl = `https://api.klavis.ai/oauth/figma/authorize?instance_id=${instanceId}&client_id=${yourClientId}`;
   window.location.href = authUrl;
   ```
   
   ```typescript TypeScript SDK
   import { Klavis } from "@klavis/sdk";
   
   const klavis = new Klavis({
     apiKey: "YOUR_API_KEY"
   });
   
   // Example: Initiating Figma OAuth with white-label
   const oauthUrl = await klavis.mcpServer.getOAuthUrl({
     serverName: Klavis.McpServerName.Figma,
     instanceId: instanceId,
     clientId: yourClientId,
     // redirectUri: YOUR_REDIRECT_URI,
     // scope: "YOUR_SCOPES", 
   });
   
   window.location.href = oauthUrl;
   ```
   
   ```python Python SDK
   import webbrowser
   from klavis import Klavis
   from klavis.types import McpServerName
   
   klavis = Klavis(api_key="YOUR_API_KEY")
   
   # Example: Initiating Figma OAuth with white-label
   oauth_url = klavis.mcp_server.get_oauth_url(
       server_name=McpServerName.FIGMA,
       instance_id=instance_id,
       client_id=your_client_id,
       # redirect_uri="YOUR_REDIRECT_URI",
       # scope="YOUR_SCOPES"
   )
   
   # Open OAuth URL in user's default browser
   webbrowser.open(oauth_url)
   ```
   
   </CodeGroup>

<Tip>
For detailed white labeling implementation and code examples, see our [OAuth & White Labeling guide](/auth/white-label).
</Tip>

## Resources
- [Figma Developer Documentation](https://www.figma.com/developers/api)
- [Figma OAuth 2.0 Authentication Guide](https://www.figma.com/developers/api#authentication)
- [Klavis OAuth & White Labeling Guide](/auth/white-label)
- [Klavis White Label Dashboard](https://www.klavis.ai/home/white-label)
- [Figma API Scopes Reference](https://www.figma.com/developers/api#authentication-scopes)